<app-common-header [title]="'myAccount.setting.accountScurity.resetPwdEntryFunction.title'|translate" [routerUrl]="'/tabs/myAccount/setting/account-security/login-password/reset-password'"></app-common-header>
<ion-content>
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="updatePassword()">
  <ion-grid class="change-pwd-title">
    <ion-row>
      <ion-col size="12">
        <div>
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.subTitle'|translate}}
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid>
    <ion-row  class="password-item">
      <ion-col size="4">
        <div>
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.newPwd'|translate}}
        </div>
      </ion-col>
      <ion-col size="8">
        <div class="input-btn">
          <ion-input type="password" 
                    clearInput 
                    maxlength=20
                    placeholder="{{'myAccount.setting.accountScurity.resetPwdEntryFunction.enter'|translate}}" 
                    formControlName="password">
          </ion-input>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" *ngIf="password.invalid && (password.dirty || password.touched)">
        <div *ngIf="password.errors.required" class="form-error-item">
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.newPwd_required'|translate}}
        </div>
        <div *ngIf="password.hasError('pattern')" class="form-error-item">
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.password_format_error' | translate}}
        </div>
      </ion-col>
    </ion-row>
    <ion-row  class="password-item">
      <ion-col size="4">
        <div>
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.confirmPwd'|translate}}
        </div>
      </ion-col>
      <ion-col size="8">
        <div class="input-btn">
          <ion-input type="password" 
                    clearInput
                    maxlength=20 
                    placeholder="{{'myAccount.setting.accountScurity.resetPwdEntryFunction.enter'|translate}}" 
                    formControlName="repeatPassword">
        </ion-input>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" *ngIf="repeatPassword.invalid && (repeatPassword.dirty || repeatPassword.touched)">
        <div *ngIf="repeatPassword.errors.required" class="form-error-item">
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.confirmPwd_required'|translate}}
        </div>
      </ion-col>
      <ion-col size="12" *ngIf="validateForm.hasError('notMatch')">
        <div class="form-error-item">
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.pwd_not_match'|translate}}
        </div>
      </ion-col>
      <div *ngIf="repeatPassword.hasError('pattern')" class="form-error-item">
        {{'myAccount.setting.accountScurity.resetPwdEntryFunction.password_format_error' | translate}}
      </div>
    </ion-row>
  </ion-grid>
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-button expand="full" fill="clear" class="customer-btn" type="submit" [disabled]='validateForm.invalid || loading'>
          {{'myAccount.setting.accountScurity.resetPwdEntryFunction.confirm'|translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</ion-content>


